{# Copyright (c) 2014-2017, NVIDIA CORPORATION.  All rights reserved. #}

{% from "helper.html" import print_flashes %}
{% from "helper.html" import print_errors %}
{% from "helper.html" import mark_errors %}

{% extends "layout.html" %}

{% block title %}
New Image Classification Dataset
{% endblock %}

{% block nav %}
<li class="active"><a href="{{url_for('digits.dataset.images.classification.views.new')}}">New Dataset</a></li>
{% endblock %}

{% block content %}

<div class="page-header">
    <h1>New Image Classification Dataset</h1>
</div>

<form action="{{url_for('digits.dataset.images.classification.views.create')}}" enctype="multipart/form-data" method="post">
    {{ form.hidden_tag() }}

    {{ print_errors(form) }}

    <div class="row">
        <div class="col-sm-4 well">
            <div class="row">
                <div class="form-group{{mark_errors([form.resize_channels])}}">
                    {{ form.resize_channels.label }}
                    {{ form.resize_channels.tooltip }}
                    {{ form.resize_channels(class='form-control') }}
                </div>
            </div>
            <div class="row">
                <div class="form-group{{mark_errors([form.resize_width, form.resize_height])}}">
                    <label>Image size (Width x Height)</label>
                    <span name="resize_dims_explanation"
                          class="explanation-tooltip glyphicon glyphicon-question-sign"
                          data-container="body"
                          title="Input images will be resized to fit."
                          ></span>
                    <div class="input-group">
                        {{ form.resize_width(size=4, placeholder='width', class='form-control') }}
                        <span class="input-group-addon">x</span>
                        {{ form.resize_height(size=4, placeholder='height', class='form-control') }}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group{{mark_errors([form.resize_mode])}}">
                    {{ form.resize_mode.label }}
                    {{ form.resize_mode.tooltip }}
                    {{ form.resize_mode(class='form-control') }}
                </div>
            </div>
            <div class="row">
                <a class="btn btn-info" href="#" onClick="return showResizeExample();">See example</a>
                <br>
                <br>
                <div id="resize-example" style="display:none;">
                    <button class="close" onClick="$('#resize-example').hide();return false;">&times;</button>
                    <div id="resize-example-image"></div>
                </div>
                <script>
function showResizeExample()
{
    $.post(
            "{{url_for('digits.dataset.images.views.resize_example')}}",
            {
                "channels": $("#resize_channels").val(),
                "width":    $("#resize_width").val(),
                "height":   $("#resize_height").val(),
                "resize_mode":   $("#resize_mode").val(),
                "backend": $("#backend").val(),
                "encoding": $("#encoding").val(),
            },
            function(response) {
                $('#resize-example-image').html(response);
                $('#resize-example').show();
            }
        );
    return false;
}
                </script>
            </div>
        </div>

        <div class="col-sm-8">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="db-tabs" role="tablist">
                <li><a href="#db-folder" role="tab" data-toggle="tab">Use Image Folder</a></li>
                <li><a href="#db-textfile" role="tab" data-toggle="tab">Use Text Files</a></li>
                <li><a href="#db-s3" role="tab" data-toggle="tab">Use S3</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content well">
                <!-- Folder -->
                <div class="tab-pane" id="db-folder">
                    <div class="form-group{{mark_errors([form.folder_train])}}">
                        {{ form.folder_train.label }}
                        {{ form.folder_train.tooltip }}
                        {{ form.folder_train(class='form-control autocomplete_path', placeholder='folder or URL')}}
                    </div>
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1">
                            <small>
                            </small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-6{{mark_errors([form.folder_train_min_per_class])}}">
                            {{ form.folder_train_min_per_class.label }}
                            {{ form.folder_train_min_per_class.tooltip }}
                            {{ form.folder_train_min_per_class(class='form-control') }}
                        </div>
                        <div class="form-group col-sm-6{{mark_errors([form.folder_train_max_per_class])}}">
                            {{ form.folder_train_max_per_class.label }}
                            {{ form.folder_train_max_per_class.tooltip }}
                            {{ form.folder_train_max_per_class(class='form-control') }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-6{{mark_errors([form.folder_pct_val])}}">
                            {{ form.folder_pct_val.label }}
                            {{ form.folder_pct_val.tooltip }}
                            {{ form.folder_pct_val(class='form-control') }}
                        </div>
                        <div class="form-group col-sm-6{{mark_errors([form.folder_pct_test])}}">
                            {{ form.folder_pct_test.label }}
                            {{ form.folder_pct_test.tooltip }}
                            {{ form.folder_pct_test(class='form-control') }}
                        </div>
                    </div>
                    <br>
                    {{form.has_val_folder}}
                    {{form.has_val_folder.label}}
                    <div style="display:none;" class="form-group{{mark_errors([form.folder_val])}} cl-separate-val-folder">
                        {{ form.folder_val.label }}
                        {{ form.folder_val(class='form-control autocomplete_path') }}
                    </div>
                    <div class="row cl-separate-val-folder">
                        <div class="form-group col-sm-6{{mark_errors([form.folder_val_min_per_class])}}">
                            {{ form.folder_val_min_per_class.label }}
                            {{ form.folder_val_min_per_class.tooltip }}
                            {{ form.folder_val_min_per_class(class='form-control') }}
                        </div>
                        <div class="form-group col-sm-6{{mark_errors([form.folder_val_max_per_class])}}">
                            {{ form.folder_val_max_per_class.label }}
                            {{ form.folder_val_max_per_class.tooltip }}
                            {{ form.folder_val_max_per_class(class='form-control') }}
                        </div>
                    </div>
                    <script>
function hasValFolderChanged() {
    if ($("#has_val_folder").prop("checked"))
    {
        $("#folder_val").prop("disabled", false);
        $(".cl-separate-val-folder").show();
        $("#folder_pct_val").prop("disabled", true);
    }
    else
    {
        $(".cl-separate-val-folder").hide();
        $("#folder_val").prop("disabled", true);
        $("#folder_pct_val").prop("disabled", false);
    }
}
$("#has_val_folder").click(hasValFolderChanged);
hasValFolderChanged();
                    </script>
                    <br>
                    {{form.has_test_folder}}
                    {{form.has_test_folder.label}}
                    <div style="display:none;" class="form-group{{mark_errors([form.folder_test])}} cl-separate-test-folder">
                        {{ form.folder_test.label }}
                        {{ form.folder_test(class='form-control autocomplete_path') }}
                    </div>
                    <div style="display:none;" class="row cl-separate-test-folder">
                        <div class="form-group col-sm-6{{mark_errors([form.folder_test_min_per_class])}}">
                            {{ form.folder_test_min_per_class.label }}
                            {{ form.folder_test_min_per_class.tooltip }}
                            {{ form.folder_test_min_per_class(class='form-control') }}
                        </div>
                        <div class="form-group col-sm-6{{mark_errors([form.folder_test_max_per_class])}}">
                            {{ form.folder_test_max_per_class.label }}
                            {{ form.folder_test_max_per_class.tooltip }}
                            {{ form.folder_test_max_per_class(class='form-control') }}
                        </div>
                    </div>
                    <script>
function hasTestFolderChanged() {
    if ($("#has_test_folder").prop("checked"))
    {
        $("#folder_test").prop("disabled", false);
        $(".cl-separate-test-folder").show();
        $("#folder_pct_test").prop("disabled", true);
    }
    else
    {
        $(".cl-separate-test-folder").hide();
        $("#folder_test").prop("disabled", true);
        $("#folder_pct_test").prop("disabled", false);
    }
}
$("#has_test_folder").click(hasTestFolderChanged);
hasTestFolderChanged();
                    </script>
                </div>
                <!-- Textfile -->
                <div class="tab-pane" id="db-textfile">
                    <div class="row">
                        <table class="table">
                            <tr>
                                <th width="20%">Set</th>

                                <th width="40%">Text file <span name="text_file_explanation"
                          class="explanation-tooltip glyphicon glyphicon-question-sign"
                                    data-container="body"
                                    title="Each line in the file should be formatted as '<PATH> <LABEL>' where <PATH> specifies image path either on the local filesystem or a URL, and the <LABEL> is a numeric label that matches the uploaded labels file"
                                ></span></th>

                                <th width="40%">Image folder <i>(optional)</i> <span name="image_folder_explanation"
                                    class="explanation-tooltip glyphicon glyphicon-question-sign"
                                    data-container="body"
                                    title="Paths in the text files will be appended with this value before reading"
                                ></span></th>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <label for="{{form.textfile_use_local_files.name}}">
                                        {{form.textfile_use_local_files}}
                                        Use local paths on server
                                    </label>
                                    <span name="text_file_explanation"
                                          class="explanation-tooltip glyphicon glyphicon-question-sign"
                                          data-container="body"
                                          title="Check to use local paths on server, uncheck to upload files from client machine"
                                    ></span>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><b>Training</b></td>
                                <td class="form-group{{mark_errors([form.textfile_train_images])}} cl-upload-files">
                                    {{ form.textfile_train_images(class='form-control') }}
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_local_train_images])}} cl-local-files">
                                    {{ form.textfile_local_train_images(class='form-control autocomplete_path',placeholder='enter path') }}
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_train_folder])}}">
                                    {{ form.textfile_train_folder(class='form-control autocomplete_path') }}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="{{form.textfile_use_val.name}}">
                                        {{form.textfile_use_val}}
                                        Validation
                                    </label>
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_val_images])}} cl-upload-files">
                                    {{ form.textfile_val_images(class='form-control') }}
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_local_val_images])}} cl-local-files">
                                    {{ form.textfile_local_val_images(class='form-control autocomplete_path',placeholder='enter path') }}
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_val_folder])}}">
                                    {{ form.textfile_val_folder(class='form-control autocomplete_path') }}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="{{form.textfile_use_test.name}}">
                                        {{form.textfile_use_test}}
                                        Test
                                    </label>
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_test_images])}} cl-upload-files">
                                    {{ form.textfile_test_images(class='form-control') }}
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_local_test_images])}} cl-local-files">
                                    {{ form.textfile_local_test_images(class='form-control autocomplete_path',placeholder='enter path') }}
                                </td>
                                <td class="form-group{{mark_errors([form.textfile_test_folder])}}">
                                    {{ form.textfile_test_folder(class='form-control autocomplete_path') }}
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-1">
                            <div class="form-group{{mark_errors([form.textfile_shuffle])}}">
                                {{ form.textfile_shuffle.label }}
                                {{ form.textfile_shuffle.tooltip }}
                                {{ form.textfile_shuffle(class='form-control') }}
                            </div>
                            <div class="form-group{{mark_errors([form.textfile_labels_file])}} cl-upload-files">
                                {{ form.textfile_labels_file.label }}
                                {{ form.textfile_labels_file.tooltip }}
                                {{ form.textfile_labels_file(class='form-control') }}
                            </div>
                            <div class="form-group{{mark_errors([form.textfile_local_labels_file])}} cl-local-files">
                                {{ form.textfile_local_labels_file.label }}
                                {{ form.textfile_local_labels_file.tooltip }}
                                {{ form.textfile_local_labels_file(class='form-control autocomplete_path',placeholder='enter path') }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- S3 -->
                <div class="tab-pane" id="db-s3">
                    <div class="form-group{{mark_errors([form.s3_endpoint_url])}}">
                        {{ form.s3_endpoint_url.label }}
                        {{ form.s3_endpoint_url.tooltip }}
                        {{ form.s3_endpoint_url(class='form-control', placeholder='S3 Endpoint URL(e.g. https://s3.yourcompany.com:443/)')}}
                    </div>
                    <div class="form-group{{mark_errors([form.s3_bucket])}}">
                        {{ form.s3_bucket.label }}
                        {{ form.s3_bucket.tooltip }}
                        {{ form.s3_bucket(class='form-control', placeholder='Bucket Name')}}
                    </div>
                    <div class="form-group{{mark_errors([form.s3_path])}}">
                        {{ form.s3_path.label }}
                        {{ form.s3_path.tooltip }}
                        {{ form.s3_path(class='form-control', placeholder='A Path To Image Folders')}}
                    </div>
                    <div class="form-group{{mark_errors([form.s3_accesskey])}}">
                        {{ form.s3_accesskey.label }}
                        {{ form.s3_accesskey.tooltip }}
                        {{ form.s3_accesskey(class='form-control', placeholder='S3 Access Key')}}
                    </div>
                    <div class="form-group{{mark_errors([form.s3_secretkey])}}">
                        {{ form.s3_secretkey.label }}
                        {{ form.s3_secretkey.tooltip }}
                        {{ form.s3_secretkey(class='form-control', placeholder='S3 Secret Key', type='password')}}
                    </div>
                    <div class="form-group checkbox-fix {{mark_errors([form.s3_keepcopiesondisk])}}">
                        {{ form.s3_keepcopiesondisk(class='form-control', placeholder='S3 Secret Key', type='checkbox')}}
                        {{ form.s3_keepcopiesondisk.label }}
                        {{ form.s3_keepcopiesondisk.tooltip }}
                    </div>
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1">
                            <small>
                            </small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-6{{mark_errors([form.s3_train_min_per_class])}}">
                            {{ form.s3_train_min_per_class.label }}
                            {{ form.s3_train_min_per_class.tooltip }}
                            {{ form.s3_train_min_per_class(class='form-control') }}
                        </div>
                        <div class="form-group col-sm-6{{mark_errors([form.s3_train_max_per_class])}}">
                            {{ form.s3_train_max_per_class.label }}
                            {{ form.s3_train_max_per_class.tooltip }}
                            {{ form.s3_train_max_per_class(class='form-control') }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-6{{mark_errors([form.s3_pct_val])}}">
                            {{ form.s3_pct_val.label }}
                            {{ form.s3_pct_val.tooltip }}
                            {{ form.s3_pct_val(class='form-control') }}
                        </div>
                        <div class="form-group col-sm-6{{mark_errors([form.s3_pct_test])}}">
                            {{ form.s3_pct_test.label }}
                            {{ form.s3_pct_test.tooltip }}
                            {{ form.s3_pct_test(class='form-control') }}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {{ form.method(style="display:none;") }}
    <script>
// Disable form fields according to the checkboxes
function textfile_image_sets_disabled() {
    var value = $("#textfile_use_val").prop("checked");
    var useLocalFiles = $("#textfile_use_local_files").prop("checked");
    if (useLocalFiles) {
        $(".cl-upload-files").hide();
        $(".cl-local-files").show();
    }
    else{
        $(".cl-upload-files").show();
        $(".cl-local-files").hide();
    }

     if (value) {
         $("#textfile_val_images_btn").removeClass("disabled");
     } else {
         $("#textfile_val_images_btn").addClass("disabled");
     }

    $("#textfile_val_images_text").prop("disabled", !value);
    $("#textfile_local_val_images").prop("disabled", !value);
    $("#textfile_val_folder").prop("disabled", !value);
    value = $("#textfile_use_test").prop("checked");

     if (value) {
         $("#textfile_test_images_btn").removeClass("disabled");
     } else {
         $("#textfile_test_images_btn").addClass("disabled");
     }

    $("#textfile_test_images_text").prop("disabled", !value);
    $("#textfile_local_test_images").prop("disabled", !value);
    $("#textfile_test_folder").prop("disabled", !value);
}

$("#textfile_use_val").click(function() {
        textfile_image_sets_disabled();
        });
$("#textfile_use_test").click(function() {
        textfile_image_sets_disabled();
        });
$("#textfile_use_local_files").click(function() {
        textfile_image_sets_disabled();
        });
textfile_image_sets_disabled();

function update_db_tab(tabName) {
    $('select[name=method]').val( tabName );
}
$('#db-tabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        parts = e.target.href.split('-');
        update_db_tab( parts[parts.length-1] );
        });
$('#db-tabs a[href="#db-{{ form.method.data }}"]').tab('show');

    </script>

    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 well">
            <div class="form-group{{mark_errors([form.backend])}}">
                {{ form.backend.label }}
                {{ form.backend.tooltip }}
                {{ form.backend(class='form-control') }}
            </div>
            <div id="backend-hdf5-warning" class="alert alert-warning" style="display:none;">
                <b>NOTE:</b> HDF5 is currently only supported for classification.
                <ul>
                    <li>For the Caffe data layers, (change <i>Data</i> layers to <i>HDF5Data</i> layers)</li>
                    <li>The Caffe <i>HDF5Data</i> layer does not support mean subtraction</li>
                    <li>Database exploration in the DIGITS UI is not supported.</li>
                </ul>
            </div>
            <div id="backend-tfrecords-warning" class="alert alert-warning" style="display:none;">
                <b>NOTE:</b> TFRecords currently only works with Tensorflow, not with Caffe or Torch.
            </div>
            <div class="form-group{{mark_errors([form.compression])}}">
                <div class="form-group{{mark_errors([form.compression])}}">
                    {{form.compression.label}}
                    {{form.compression.tooltip}}
                    {{form.compression(class='form-control')}}
                </div>
            </div>
            <div class="form-group{{mark_errors([form.encoding])}}">
                <div class="form-group{{mark_errors([form.encoding])}}">
                    {{form.encoding.label}}
                    {{form.encoding.tooltip}}
                    {{form.encoding(class='form-control')}}
                </div>
            </div>
            <script>
function backendChanged()
{
    val = $("#backend").val();
    if (val == 'lmdb') {
        $("#compression").parent().hide();
        $("#encoding").parent().show();
        $("#backend-hdf5-warning").hide();
        $("#backend-tfrecords-warning").hide();
    } else if (val == 'hdf5') {
        $("#encoding").parent().hide();
        $("#compression").parent().show();
        $("#backend-hdf5-warning").show();
        $("#backend-tfrecords-warning").hide();
    } else if (val == 'tfrecords') {
        $("#compression").parent().hide();
        $("#encoding").parent().show();
        $("#backend-hdf5-warning").hide();
        $("#backend-tfrecords-warning").show();
    }
}
$("#backend").change(backendChanged);
backendChanged();
            </script>
            <div class="form-group{{mark_errors([form.group_name])}}">
                {{ form.group_name.label }}
                {{ form.group_name(class='form-control') }}
            </div>
            <div class="form-group{{mark_errors([form.dataset_name])}}">
                {{ form.dataset_name.label }}
                {{ form.dataset_name(class='form-control') }}
            </div>
            <input type="submit" name="create-dataset" class="btn btn-primary" value="Create">
        </div>
    </div>

</form>

<script>
$(".explanation-tooltip").tooltip();
</script>

{% endblock %}
